<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>API 调用和权限配置演示</span>
      </div>

      <!-- 用户信息展示 -->
      <div class="user-info">
        <h3>当前用户信息</h3>
        <p><strong>用户名:</strong> {{ $store.getters.name }}</p>
        <p><strong>全名:</strong> {{ $store.getters.fullname }}</p>
        <p><strong>权限角色:</strong> {{ $store.getters.roles.join(', ') }}</p>
        <p><strong>当前项目ID:</strong> {{ $store.getters.projectId }}</p>
      </div>

      <el-divider />

      <!-- 项目选择器 -->
      <div class="project-selector">
        <h3>项目切换</h3>
        <el-select
          v-model="selectedProjectId"
          placeholder="选择项目"
          style="width: 300px;"
          @change="handleProjectChange"
        >
          <el-option
            v-for="project in $store.getters.projects"
            :key="project.id"
            :label="project.name"
            :value="project.id"
          />
        </el-select>
      </div>

      <el-divider />

      <!-- API 调用演示 -->
      <div class="api-demo">
        <h3>API 调用演示</h3>
        <p>以下演示了如何使用配置好的 API 调用，会自动包含 Authorization 和 PTOKEN 头部：</p>

        <el-button type="primary" :loading="loading" @click="testApiCall">
          测试 API 调用
        </el-button>

        <div v-if="apiResponse" class="api-response">
          <h4>API 响应:</h4>
          <pre>{{ JSON.stringify(apiResponse, null, 2) }}</pre>
        </div>
      </div>

      <el-divider />

      <!-- 权限控制演示 -->
      <div class="permission-demo">
        <h3>权限控制演示</h3>

        <!-- 基于角色的权限控制 -->
        <div v-if="hasRole('admin')" class="admin-only">
          <el-alert title="管理员专用功能" type="success" show-icon>
            只有管理员角色才能看到这个内容
          </el-alert>
        </div>

        <div v-if="hasRole('editor')" class="editor-only">
          <el-alert title="编辑器专用功能" type="info" show-icon>
            只有编辑器角色才能看到这个内容
          </el-alert>
        </div>

        <!-- 基于权限数组的控制 -->
        <div v-if="hasAnyRole(['admin', 'editor'])" class="privileged-content">
          <el-alert title="特权用户功能" type="warning" show-icon>
            管理员或编辑器角色才能看到这个内容
          </el-alert>
        </div>
      </div>

      <el-divider />

      <!-- 代码示例 -->
      <div class="code-examples">
        <h3>代码使用示例</h3>

        <h4>1. 获取用户权限角色：</h4>
        <pre><code>// 在组件中使用
this.$store.getters.roles

// 在 Vuex action 中使用
const roles = rootGetters.roles</code></pre>

        <h4>2. 获取当前项目ID：</h4>
        <pre><code>// 在组件中使用
this.$store.getters.projectId

// 自动包含在 API 请求的 PTOKEN 头部中</code></pre>

        <h4>3. API 调用示例：</h4>
        <pre><code>import request from '@/utils/request'

// 调用 API，会自动包含 Authorization 和 PTOKEN 头部
export function getUserData() {
  return request({
    url: '/api/user/data',
    method: 'get'
  })
}</code></pre>

        <h4>4. 权限检查函数：</h4>
        <pre><code>// 检查单个角色
hasRole(role) {
  return this.$store.getters.roles.includes(role)
}

// 检查多个角色（任一匹配）
hasAnyRole(roles) {
  return roles.some(role => this.$store.getters.roles.includes(role))
}</code></pre>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'ApiDemo',
  data() {
    return {
      selectedProjectId: null,
      loading: false,
      apiResponse: null
    }
  },
  created() {
    // 初始化选中的项目ID
    this.selectedProjectId = this.$store.getters.projectId
  },
  methods: {
    // 项目切换处理
    handleProjectChange(projectId) {
      this.$store.dispatch('setProjectId', projectId)
      this.$message.success('项目已切换')
    },

    // 测试 API 调用
    async testApiCall() {
      this.loading = true
      this.apiResponse = null

      try {
        // 这里使用一个示例 API，实际使用时替换为真实的 API
        const response = await request({
          url: '/api/user/info', // 示例 API
          method: 'get'
        })

        this.apiResponse = response
        this.$message.success('API 调用成功')
      } catch (error) {
        this.$message.error('API 调用失败: ' + error.message)
        this.apiResponse = { error: error.message }
      } finally {
        this.loading = false
      }
    },

    // 权限检查：单个角色
    hasRole(role) {
      return this.$store.getters.roles.includes(role)
    },

    // 权限检查：多个角色（任一匹配）
    hasAnyRole(roles) {
      return roles.some(role => this.$store.getters.roles.includes(role))
    }
  }
}
</script>

<style scoped>
.app-container {
  margin: 20px;
}

.user-info, .project-selector, .api-demo, .permission-demo, .code-examples {
  margin-bottom: 20px;
}

.api-response {
  margin-top: 15px;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
}

.admin-only, .editor-only, .privileged-content {
  margin: 10px 0;
}

pre {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}
</style>
